<template>
  <el-aside class="archive-sider archive-bar" width="200px">
    <ul>
      <li :key="a.year+a.month" v-for="a in archives">
        <el-badge :value="a.articleNum" class="archive-item">
          <el-button @click="view(a.year,a.month)">{{`${a.year}年${a.month}月`}}</el-button>
        </el-badge>
      </li>
    </ul>
  </el-aside>
</template>

<script>
import { getAllArchives } from '@/api/archive'
export default {
  data () {
    return {
      loading: false,
      archives: []
    }
  },
  mounted () {
    this.getArchives()
  },
  methods: {
    getArchives () {
      getAllArchives()
        .then(data => {
          this.archives = data.data
        })
        .catch(err => {
          if (err !== 'error') {
            this.$message({
              type: 'error',
              message: '归档标签加载失败',
              showClose: true
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    view (year, month) {
      this.$router.push({ name: 'articleByArchive', params: { year: year, month: month } })
    }
  }
}
</script>

<style>
.archive-bar li {
  line-height: 20px;
  padding: 9px;
  list-style-type: none;
}
.archive-bar div {
  text-align: center;
}

.archive-bar {
  padding: 15px;
  background-color: #fff !important;
  max-height: 540px;
  position: fixed;
  right: 25%;
  margin-top: 20px;
}
</style>
